<template>
    <!-- 自定义树组件，继承el-tree属性和方法 -->
  <div>
    <upper-template noSearchButton :noIcon="!vpHeader.search" :configIcon="false" style="height:42px;" search-place="left" v-if="vpHeader.show">
          <div slot="buttonArea" class="top-title" v-if="vpHeader.text">
            <span class="vertical-bar"></span>
            {{vpHeader.text}}
          </div>
          <div slot="searchArea" v-if="vpHeader.search">
              <onlyOneSearch
                  v-model="filterText"
                  placeholder="请输入名称"
                  :search-method="filterTree"
                ></onlyOneSearch>
          </div>
        </upper-template>
    <div class="vp-tree-title" v-if="vpTitle">
      <span class="title_text" >{{ vpTitle }}</span>
      <!-- <i class="el-icon-folder-opened" title="切换节点高度" @click="cutNodeHeight"></i> -->
    </div>
    <div class="tree_box">
        <el-tree
          v-bind="{...$props,...$attrs}"
          v-on="$listeners"
          :filter-node-method="filterNode"
          ref="vptree"
          icon-class="iconfont icon-treenodeS"
        >
            <slot></slot>
        </el-tree>
    </div>
    <div v-if="footerBtn">
      <el-tag @click.native="setAllExpand(true)" v-if="state">展开</el-tag>
    <!-- <el-tooltip class="item" effect="dark" content="一键收起" placement="top-start"> -->
    <el-tag @click.native="setAllExpand(false)" v-else>收起</el-tag>
    <!-- </el-tooltip> -->
    </div>
  </div>
</template>

<script>
export default {
    // header标题，为空则头部不显示
  props: {
    vpHeader:{
      type: Object,
      default: ()=>{
        return {
            show: false,// 是否显示头部
            text:"",// 头部文字
            search:true,// 是否开启节点过滤
            name:"label" //过滤字段
        }
      }
    },
    vpTitle: {
      type: String,
      default: ""
    },
    footerBtn:{
      type: Boolean,
      default :true
    }
  },
  created(){
  },
  mounted(){
      this.$tree = this.$refs.vptree;
      this.nowStatus();
  },
  data() {
    return {
        inheritAttrs:false,
        state:false,
        filterText:"",
        nodeHeight:"40px"
    };
  },
  methods: {
    filterTree() {
      this.$tree.filter(this.filterText);
    },
    filterNode(value, data) {
    console.log(this.$props)
      if (!value) return true;
      return data[this.vpHeader.name].indexOf(value) !== -1;
    },
    // 辨认现在是展开还是收缩状态
    nowStatus(){
      let flag = true;
      var nodes=this.$refs.vptree.store._getAllNodes()
          // console.log(nodes)
        for(var i=0;i< nodes.length;i++){
            if(nodes[i].expanded==true){
              flag = false; break;
            };
        }
        this.state = flag
    },
      //设置全部展开和折叠。state参数为bool值
    setAllExpand(state){
          
      var nodes=this.$refs.vptree.store._getAllNodes()
          console.log(nodes)
        for(var i=0;i< nodes.length;i++){
            nodes[i].expanded=state;
        }
        this.state = !state
    },
    // 切换节点高度 
    cutNodeHeight(){
      if(this.nodeHeight=='40px'){
        this.nodeHeight = '10px'
      }else{
        this.nodeHeight = '40px'
      }
    },
  },
};
</script>

<style lang="scss" vars= {nodeHeight} scoped>
.vp-tree-title {
  height: 40px;
  background: #ecf1fc;
  border-radius: 2px 2px 0px 0px;
    position: relative;
  .title_text {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #6f76a5;
    line-height: 40px;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
  }
  .el-icon-folder-opened{
    color: #6f76a5;
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.tree_box{
border-radius: 0px 0px 2px 2px;
border: 1px solid #EAEBED;
max-height: 573px;
overflow-y:auto;
}
/deep/.el-tree-node {
background: #fff;
   
}
/deep/.el-tree-node__content{
height: 40px;
border-bottom: 1px solid #EAEBED;
font-size: 12px;
border-left: 15px solid transparent;
}
.el-tag{
  margin: 9px 3px;
width: 65px;
height: 26px;
border: 1px solid #DCE0E6;
background-color: #fff;
line-height: 26px;
text-align: center;
cursor: pointer;
color:#999;
}
.top-title {
  
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 20px;
vertical-align: middle;
margin-top: 9px;
}
.vertical-bar {
  line-height: 20px;
  font-weight: 500px;
}

// tree组件的icon修改，需要设置icon-class
/deep/.el-tree-node__content>.el-tree-node__expand-icon {
    padding: 0px;
    font-size: 12px;
}
/deep/.el-tree-node__expand-icon::before {
  // content: "\e7a0";
  color: #769aff;
}

/deep/.expanded.el-tree-node__expand-icon::before {
  content: "\e64a";
}

/deep/.is-leaf.el-tree-node__expand-icon::before {
  content: "\e647";
  color: #fec24e;
}
</style>